<template>
    <div class="connector-setting-new">
        <el-button @click="clickApp">触发应用</el-button>
        <el-button @click="clickCondition">触发条件</el-button>
        <el-button @click="clickExecution">执行动作</el-button>
        <el-button @click="clickCode">执行代码</el-button>
        <el-button @click="clickMessage">消息通知</el-button>
        <textarea :value="JSON.stringify(state, null, '\t')" style="height: 90%; max-height: none; width: 500px; margin-top: 20px;"></textarea>
        <el-drawer :visible.sync="show" :before-close="closeDrawer" size="600px">
            <div slot="title">
                <div class="connector-setting-new-title">{{ title }}</div>
            </div>
            <div class="connector-setting-new-content">
                <trigger-application v-if="kind === 1" />
                <trigger-condition v-if="kind === 2" />
                <execution-action v-if="kind === 3" />
                <execution-code v-if="kind === 4" />
                <message-notification v-if="kind === 5" />
            </div>
        </el-drawer>
    </div>
</template>

<script>
import state from '@src/modules/trigger/view/setting/util/state.js'
import TriggerApplication from './components/trigger_application';
import TriggerCondition from './components/trigger_condition'
import ExecutionAction from './components/execution_action'
import ExecutionCode from './components/execution_code';
import MessageNotification from './components/message_notification'

export default {
    name: 'connector-setting-new',
    computed: {
        state() {
            return state;
        },
    },
    data() {
        return {
            show: false,
            title: '从哪里开始',
            kind: 1,
        };
    },
    created() {
        state.executeWay.way = this.$router.currentRoute.query.triggerWay;
    },
    components: {
        TriggerApplication,
        TriggerCondition,
        ExecutionAction,
        ExecutionCode,
        MessageNotification,
    },
    methods: {
        clickApp() {
            this.title = '触发应用';
            this.show = true;
            this.kind = 1;
        },
        clickCondition() {
            this.title = '触发条件';
            this.show = true;
            this.kind = 2;
        },
        clickExecution() {
            this.title = '执行动作';
            this.show = true;
            this.kind = 3;
        },
        clickCode() {
            this.title = '执行代码';
            this.show = true;
            this.kind = 4;
        },
        clickMessage() {
            this.title = '消息通知';
            this.show = true;
            this.kind = 5;
        },
        closeDrawer() {
            this.show = false;
        },
    },
};
</script>

<style scoped lang="scss">
.connector-setting-new {
    height: 100%;
    &-title {
        font-size: 18px;
        font-weight: 500;
        margin: 6px 14px;
        color: #262626;
    }
}

::v-deep .el-drawer {
    margin-top: 16px;
    border-radius: 8px 8px 0 0;
    .connector-setting-new-content {
        height: 100%;
        overflow: auto;
    }
}
</style>
